<div id="menuopen">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="ntModalLabel">{$title|default=''}</h4>
    </div>
    <div class="modal-body">
        <input type="hidden" id="requestType" value="{$requestType|default=''}" name="">   
        <input type="hidden" id="pid" value="{$pid|default=''}" name="">     
        <input type="hidden" id="id" value="{$id|default=''}" name="">  
        <div class="row clearfix">
            <div class="col-md-12 column">
              <div class="alert alert-dismissable alert-info">
                <button type="button" class="close">×</button>
                 <p></p>
                </div>
            </div>
           </div>   
       <div class="row clearfix">
            <div class="col-md-12 column">
                <ul class="nav nav-tabs">
                    <li :class="{'active':index==0}" v-for="(lang,index) in langs" @click="changeTab(lang.code)">
                        <a :href="'#'+lang.code" data-toggle="tab">{{lang.name}}</a>
                    </li>
                </ul>
            </div>
        </div>
    
    
        <table class="table table-striped table-hover ntTable" style="padding-top:0">
            <tbody>
                    <tr  v-if="isShowTopMenu">
                    <td>上级菜单<span class="required"></span></td>
                    <td>
                        <div class="input-group">
                            <div class="input-group-btn">
                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">{{menuname}}
                                <span class="caret" style="margin-left:10px"></span>
                                </button>
                                
                                <ul class="dropdown-menu" style="max-height: 300px;overflow: auto;">
                                    <li v-for="(menuitem,indedx) in menus" @click="selMenu(menuitem.id,menuitem['name_'+Tablang])"><a href="#" :style="{'padding-left':menuitem.level+1+'em'}"><span :class="['glyphicon',menuitem.style]"></span> {{menuitem['name_'+Tablang]}}</a></li>
                                    <li v-if="menus.length==0" style="padding-left: 1em;">暂无数据</li>
                                </ul> 
                            </div>
                        </div>
                    </td>
                    </tr>

                   <tr v-for="(langitem,index) in langs" v-show="Tablang==langitem.code">
                        <td>名称<span class="required"></span></td>
                        <td>
                            <input type="text" class="form-control" placeholder="名称" v-model="data.name['name_'+langitem.code]">
                        </td>
                    </tr>
                   <tr>
                    <td>控制器</td>
                    <td>
                        <input type="text" class="form-control" placeholder="控制器" v-model="data.control">
                    </td>
                </tr>
                   <tr>
                    <td>操作</td>
                    <td>
                        <input type="text" class="form-control" placeholder="操作" v-model="data.handle" >
                    </td>
                </tr>
                <tr>
                    <td>图标</td>
                    <td>
                        <input type="text" class="form-control" placeholder="图标" v-model="data.style">
                    </td>
                </tr>
                <tr>
                    <td>样式</td>
                    <td>
                        <input type="text" class="form-control" placeholder="样式" v-model="data.nameclass">
                    </td>
                </tr>
                   <tr>
                    <td>排序</td>
                    <td>
                        <input type="text" class="form-control" placeholder="排序" v-model="data.sort">
                    </td>
                </tr>
                <tr>
                    <td>菜单</td>
                    <td>
                        <label class="radio-inline">
                            <input type="radio" name="optionsRadioinline" value="menu" :checked="data.is_menu=='menu'" @click="data.is_menu='menu'"> 菜单
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="optionsRadioinline" value="func" :checked="data.is_menu=='function'" @click="data.is_menu='function'"> 功能
                        </label>
                    </td>
                </tr>
                <!-- <tr>
                    <td>列表功能按钮</td>
                    <td>
                        <label class="radio-inline">
                            <input type="radio" name="isRight" :checked="data.is_right==1" @click="data.is_right=1"> 是
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="isRight" :checked="data.is_right==0" @click="data.is_right=0"> 否
                        </label>
                    </td>
                </tr> -->
                <tr>
                    <td>状态</td>
                    <td>
                        <label class="checkbox-inline">
                            <input type="checkbox" name="optionsCheckboxsinline" value="hide" v-model="data.status"> 禁用
                        </label>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span>取消</button>
        <button type="button" class="btn btn-primary" @click="saveFun" style="padding-left:24px;padding-right:24px"><span class="glyphicon glyphicon-floppy-disk"></span>保存</button>
    </div>
</div>
<script>
    new Vue({
        el:'#menuopen',
        data:()=>({
            langs:[],//语言种类
            Tablang:'zh',
            menus:[],
            isShowTopMenu:false,
            menuname:'选择上级菜单',//显示的上级菜单的名字
            data:{
                menu:0,//上级菜单
                name:{},//名称
                control:'',//控制器
                handle:'',//操作
                style:'',//图标
                nameclass:'',//样式
                sort:'',//排序
                is_menu:'menu',//菜单或者功能
                status:false,//对否禁用
                is_right:0,//对否禁用
                olddrank:''
            }
        }),
        methods:{
            getmenus(){
                if($('#requestType').val()=='edit')
                    var url='/admin/menu/editopen?id='+$('#id').val()+'&pid='+$('#pid').val()+'&request=edit'
                else{
                    var url='/admin/menu/addopen?id='+$('#id').val()+'&request=add'
                }
                $.ajax({
                    url,
                    type:'post',
                    success:data=>{
                        data=JSON.parse(data)
                        this.menus=data.allParent
                        if($('#requestType').val()=='edit'||$('#requestType').val()=='add_sub-functions'){
                            if($('#requestType').val()=='edit'){
                                this.data.menu=data.info.pid
                                this.langs.forEach((element,index) => {
                                this.data.name['name_'+element.code]=(data.info['name_'+element.code])
                                });
                                this.data.control=data.info.control
                                this.data.handle=data.info.option
                                this.data.style=data.info.style
                                this.data.nameclass=data.info.nameclass
                                this.data.sort=data.info.drank
                                this.data.is_right=data.info.is_right
                                this.data.olddrank=data.info.olddrank
                                if(data.info.is_menu)
                                    this.data.is_menu= 'menu'
                                else
                                    this.data.is_menu= 'function'
                                if(data.info.disable)
                                    this.data.status= true
                                else
                                    this.data.status= false
                            }
                            else
                            this.data.menu=$('#pid').val()
                            this.menus.forEach(item=>{
                                if(item.id==this.data.menu){
                                    this.menuname=item['name_'+this.Tablang]
                                }
                            })
                            
                        }
                    }
                })
            },
            changeTab(Tab){
                this.Tablang=Tab
            },
            selMenu(id,name){
                this.data.menu=id
                this.menuname=name
            },
            saveFun(){
                if($('#requestType').val()=='edit')
                    var url='/admin/menu/editopen?id='+$('#id').val()+'&pid='+$('#pid').val()+'&request=update'
                else{
                    var url='/admin/menu/addopen?request=insert'
                }
                $.ajax({
                    url:url,
                    type:'post',
                    data:this.data,
                    success:data=>{
                        data=JSON.parse(data)
                        if (data.status != 1) {
                            change_mes_type('.modal-body .alert',data.status)
                            $('.modal-body .alert').show()
                            $('.modal-body .alert p').html('*' + data.msg + '<br>')
                        } else {
                            change_mes_type('.modal-body .alert',data.status)
                            this.iftijiao = false
                            $('.alert').show()
                            $('.alert p').html('*' + data.msg + '<br>')
                            $('#prosModal').modal('hide')
                        }
                    }
                })
            }
        },
        mounted(){
            $.ajax({
                url:'/admin/api/getLangType',
                type:'post',
                success:data=>{
                    this.langs = JSON.parse(data)
                    this.langs.forEach(element => {
                        this.data.name['name_'+element.code]=""
                    });
                }
            })
            if($('#requestType').val()=="add_top_menu")
                this.isShowTopMenu=false
            else{
                this.isShowTopMenu=true
                this.getmenus()
            }
        }
    })
</script>